#Learn JavaScript Variables

[webtutorsblog]

Start Your JavaScript Journey with WebTutor

In the world of web development, JavaScript has emerged as an essential programming language. Its versatility, ease of use, and ability to interact with HTML and CSS make it a powerful tool for creating dynamic and interactive websites. In this blog, we will explore the fundamental concepts of JavaScript, from its basic syntax and output to variables, operators, and more. Whether you're a beginner or a seasoned developer, there's something for everyone to learn and apply. Additionally, we'll introduce you to an excellent resource, webtutor.dev, where you can further enhance your JavaScript skills.

JavaScript Output

JavaScript allows developers to communicate with users by generating output in various ways. The most common method of output is using the console.log() function. It prints messages or data to the browser's console, which is useful for debugging and understanding what's happening in your code.

JavaScript Syntax

The syntax of JavaScript is quite user-friendly and similar to many other programming languages. Here are a few key points to remember:

Statements: JavaScript code is made up of statements, which can be declarations, assignments, function calls, loops, etc.

Case Sensitivity: JavaScript is case-sensitive, so variables myVar, myvar, and MYVAR are considered different.

Semicolons: While optional, it's a good practice to end statements with semicolons to avoid potential issues.

Whitespace: JavaScript ignores whitespace, so you can use spaces, tabs, and newlines for code formatting.

JavaScript Comments

JavaScript Comments are essential for code documentation and explanation. JavaScript supports both single-line and multi-line comments. Single-line comments start with //, and multi-line comments are enclosed between /* and */.

JavaScript Variables

Variables in JavaScript are used to store data values. They are declared using the let or const keyword. let allows reassignment, while const creates a constant that cannot be reassigned.

JavaScript Operators

Operators are symbols used to perform operations on variables and values. JavaScript supports various types of operators:

Arithmetic Operators: Used for basic arithmetic operations like addition, subtraction, multiplication, etc.

Comparison Operators: Used to compare values and return true or false based on the comparison.

Logical Operators: Used to combine multiple conditions and determine the overall truth value.

Assignment Operators: Used to assign values to variables.

Ternary Operator: A shorthand way of writing conditional statements.

Conclusion

JavaScript is the backbone of modern web development, enabling you to create dynamic and interactive websites that engage users effectively. By mastering JavaScript's syntax, output, comments, variables, and operators, you will have a strong foundation to build upon. Remember, continuous learning is the key to staying relevant and growing as a developer.

So, start your JavaScript journey today, and do not forget to visit webtutor.dev for an enriching learning experience that will take your skills to new heights. Happy coding!

[1794]

I spent around two heavily medicated hours last night trying to solve an absolutely microscopic problem in proverbs and Because I wasn't thinking straight, my third thought (having exhausted the immediate possibilities in the engine) was "I bet I can get chatgpt to write a plugin that would tell me what's causing this bug". and I did, and it did, and the plugin worked and noticed the problem, but was completely unable to tell me the source no matter how much more detail and info I got chatgpt to add. two hours later it turns out it's one single toggle to fix in the engine itself. kms

[l0stw00d]

local guy tries 2 learn javascript. decides it might be a mistake actually.

[ayakashibackstreet]

I fucking hate JavaScript

[dropoutdeveloper]

Introduction to JavaScript for Beginners: Unlock the Power of Web Development 2023

Welcome to our comprehensive guide on JavaScript for beginners. In this article, we will delve deep into the world of JavaScript, one of the most versatile and widely-used programming languages on the web. Whether you’re an aspiring web developer or simply curious about the fascinating realm of coding, we’ve got you covered. Let’s embark on this exciting journey and unlock the potential of…

[komaedalovemail]

komaedas have you tried straw.page?

(i hope you don't mind if i make a big ollllle webdev post off this!)

i have never tried straw.page but it looks similar to carrd and other WYSIWYG editors (which is unappealing to me, since i know html/css/js and want full control of the code. and can't hide secrets in code comments.....)

my 2 cents as a web designer is if you're looking to learn web design or host long-term web projects, WYSIWYG editors suck doodooass. you don't learn the basics of coding, someone else does it for you! however, if you're just looking to quickly host images, links to your other social medias, write text entries/blogposts, WYSIWYG can be nice.

toyhouse, tumblr, deviantart, a lot of sites implement WYSIWYG for their post editors as well, but then you can run into issues relying on their main site features for things like the search system, user profiles, comments, etc. but it can be nice to just login to your account and host your information in one place, especially on a platform that's geared towards that specific type of information. (toyhouse is a better example of this, since you have a lot of control of how your profile/character pages look, even without a premium account) carrd can be nice if you just want to say "here's where to find me on other sites," for example. but sometimes you want a full website!

---------------------------------------

neocities hosting

currently, i host my website on neocities, but i would say the web2.0sphere has sucked some doodooass right now and i'm fiending for something better than it. it's a static web host, e.g. you can upload text, image, audio, and client-side (mostly javascript and css) files, and html pages. for the past few years, neocities' servers have gotten slower and slower and had total blackouts with no notices about why it's happening... and i'm realizing they host a lot of crypto sites that have crypto miners that eat up a ton of server resources. i don't think they're doing anything to limit bot or crypto mining activity and regular users are taking a hit.

↑ page 1 on neocitie's most viewed sites we find this site. this site has a crypto miner on it, just so i'm not making up claims without proof here. there is also a very populated #crypto tag on neocities (has porn in it tho so be warned...).

---------------------------------------

dynamic/server-side web hosting

$5/mo for neocities premium seems cheap until you realize... The Beautiful World of Server-side Web Hosting!

client-side AKA static web hosting (neocities, geocities) means you can upload images, audio, video, and other files that do not interact with the server where the website is hosted, like html, css, and javascript. the user reading your webpage does not send any information to the server like a username, password, their favourite colour, etc. - any variables handled by scripts like javascript will be forgotten when the page is reloaded, since there's no way to save it to the web server. server-side AKA dynamic web hosting can utilize any script like php, ruby, python, or perl, and has an SQL database to store variables like the aforementioned that would have previously had nowhere to be stored.

there are many places in 2024 you can host a website for free, including: infinityfree (i use this for my test websites :B has tons of subdomains to choose from) [unlimited sites, 5gb/unlimited storage], googiehost [1 site, 1gb/1mb storage], freehostia [5 sites/1 database, 250mb storage], freehosting [1 site, 10gb/unlimited storage]

if you want more features like extra websites, more storage, a dedicated e-mail, PHP configuration, etc, you can look into paying a lil shmoney for web hosting: there's hostinger (this is my promocode so i get. shmoney. if you. um. 🗿🗿🗿) [$2.40-3.99+/mo, 100 sites/300 databases, 100gb storage, 25k visits/mo], a2hosting [$1.75-12.99+/mo, 1 site/5 databases, 10gb/1gb storage], and cloudways [$10-11+/mo, 25gb/1gb]. i'm seeing people say to stay away from godaddy and hostgator. before you purchase a plan, look up coupons, too! (i usually renew my plan ahead of time when hostinger runs good sales/coupons LOL)

here's a big webhost comparison chart from r/HostingHostel circa jan 2024.

---------------------------------------

domain names

most of the free website hosts will give you a subdomain like yoursite.has-a-cool-website-69.org, and usually paid hosts expect you to bring your own domain name. i got my domain on namecheap (enticing registration prices, mid renewal prices), there's also porkbun, cloudflare, namesilo, and amazon route 53. don't use godaddy or squarespace. make sure you double check the promo price vs. the actual renewal price and don't get charged $120/mo when you thought it was $4/mo during a promo, certain TLDs (endings like .com, .org, .cool, etc) cost more and have a base price (.car costs $2,300?!?). look up coupons before you purchase these as well!

namecheap and porkbun offer something called "handshake domains," DO NOT BUY THESE. 🤣🤣🤣 they're usually cheaper and offer more appealing, hyper-specific endings like .iloveu, .8888, .catgirl, .dookie, .gethigh, .♥, .❣, and .✟. I WISH WE COULD HAVE THEM but they're literally unusable. in order to access a page using a handshake domain, you need to download a handshake resolver. every time the user connects to the site, they have to provide proof of work. aside from it being incredibly wasteful, you LITERALLY cannot just type in the URL and go to your own website, you need to download a handshake resolver, meaning everyday internet users cannot access your site.

---------------------------------------

hosting a static site on a dynamic webhost

you can host a static (html/css/js only) website on a dynamic web server without having to learn PHP and SQL! if you're coming from somewhere like neocities, the only thing you need to do is configure your website's properties. your hosting service will probably have tutorials to follow for this, and possibly already did some steps for you. you need to point the nameserver to your domain, install an SSL certificate, and connect to your site using FTP for future uploads. FTP is a faster, alternative way to upload files to your website instead of your webhost's file upload system; programs like WinSCP or FileZilla can upload using FTP for you.

if you wanna learn PHP and SQL and really get into webdev, i wrote a forum post at Mysidia Adoptables here, tho it's sorted geared at the mysidia script library itself (Mysidia Adoptables is a free virtual pet site script, tiny community. go check it out!)

---------------------------------------

file storage & backups

a problem i have run into a lot in my past like, 20 years of internet usage (/OLD) is that a site that is free, has a small community, and maybe sounds too good/cheap to be true, has a higher chance of going under. sometimes this happens to bigger sites like tinypic, photobucket, and imageshack, but for every site like that, there's like a million of baby sites that died with people's files. host your files/websites on a well-known site, or at least back it up and expect it to go under!

i used to host my images on something called "imgjoe" during the tinypic/imageshack era, it lasted about 3 years, and i lost everything hosted on there. more recently, komaedalovemail had its webpages hosted here on tumblr, and tumblr changed its UI so custom pages don't allow javascript, which prevented any new pages from being edited/added. another test site i made a couple years ago on hostinger's site called 000webhost went under/became a part of hostinger's paid-only plans, so i had to look very quickly for a new host or i'd lose my test site.

if you're broke like me, looking into physical file storage can be expensive. anything related to computers has gone through baaaaad inflation due to crypto, which again, I Freaquing Hate, and is killing mother nature. STOP MINING CRYPTO this is gonna be you in 1 year

...um i digress. ANYWAYS, you can archive your websites, which'll save your static assets on The Internet Archive (which could use your lovely donations right now btw), and/or archive.today (also taking donations). having a webhost service with lots of storage and automatic backups can be nice if you're worried about file loss or corruption, or just don't have enough storage on your computer at home!

if you're buying physical storage, be it hard drive, solid state drive, USB stick, whatever... get an actual brand like Western Digital or Seagate and don't fall for those cheap ones on Amazon that claim to have 8,000GB for $40 or you're going to spend 13 days in windows command prompt trying to repair the disk and thenthe power is gong to go out in your shit ass neighvborhood and you have to run it tagain and then Windows 10 tryes to update and itresets the /chkdsk agin while you're awayfrom town nad you're goig to start crytypting and kts just hnot going tot br the same aever agai nikt jus not ggiog to be the saeme

---------------------------------------

further webhosting options

there are other Advanced options when it comes to web hosting. for example, you can physically own and run your own webserver, e.g. with a computer or a raspberry pi. r/selfhosted might be a good place if you're looking into that!

if you know or are learning PHP, SQL, and other server-side languages, you can host a webserver on your computer using something like XAMPP (Apache, MariaDB, PHP, & Perl) with minimal storage space (the latest version takes up a little under 1gb on my computer rn). then, you can test your website without needing an internet connection or worrying about finding a hosting plan that can support your project until you've set everything up!

there's also many PHP frameworks which can be useful for beginners and wizards of the web alike. WordPress is one which you're no doubt familiar with for creating blog posts, and Bluehost is a decent hosting service tailored to WordPress specifically. there's full frameworks like Laravel, CakePHP, and Slim, which will usually handle security, user authentication, web routing, and database interactions that you can build off of. Laravel in particular is noob-friendly imo, and is used by a large populace, and it has many tutorials, example sites built with it, and specific app frameworks.

---------------------------------------

addendum: storing sensitive data

if you decide to host a server-side website, you'll most likely have a login/out functionality (user authentication), and have to store things like usernames, passwords, and e-mails. PLEASE don't launch your website until you're sure your site security is up to snuff!

when trying to check if your data is hackable... It's time to get into the Mind of a Hacker. OWASP has some good cheat sheets that list some of the bigger security concerns and how to mitigate them as a site owner, and you can look up filtered security issues on the Exploit Database.

this is kind of its own topic if you're coding a PHP website from scratch; most frameworks securely store sensitive data for you already. if you're writing your own PHP framework, refer to php.net's security articles and this guide on writing an .htaccess file.

---------------------------------------

but. i be on that phone... :(

ok one thing i see about straw.page that seems nice is that it advertises the ability to make webpages from your phone. WYSIWYG editors in general are more capable of this. i only started looking into this yesterday, but there ARE source code editor apps for mobile devices! if you have a webhosting plan, you can download/upload assets/code from your phone and whatnot and code on the go. i downloaded Runecode for iphone. it might suck ass to keep typing those brackets.... we'll see..... but sometimes you're stuck in the car and you're like damn i wanna code my site GRRRR I WANNA CODE MY SITE!!!

↑ code written in Runecode, then uploaded to Hostinger. Runecode didn't tell me i forgot a semicolon but Hostinger did... i guess you can code from your webhost's file uploader on mobile but i don't trust them since they tend not to autosave or prompt you before closing, and if the wifi dies idk what happens to your code.

---------------------------------------

ANYWAYS! HAPPY WEBSITE BUILDING~! HOPE THIS HELPS~!~!~!

-Mod 12 @eeyes

[codemerything]

A structured way to learn JavaScript.

I came across a post on Twitter that I thought would be helpful to share with those who are struggling to find a structured way to learn Javascript on their own. Personally, I wish I had access to this information when I first started learning in January. However, I am grateful for my learning journey so far, as I have covered most topics, albeit in a less structured manner.

N/B: Not everyone learns in the same way; it's important to find what works for you. This is a guide, not a rulebook.

EASY

What is JavaScript and its role in web development?

Brief history and evolution of JavaScript.

Basic syntax and structure of JavaScript code.

Understanding variables, constants, and their declaration.

Data types: numbers, strings, boolean, and null/undefined.

Arithmetic, assignment, comparison, and logical operators.

Combining operators to create expressions.

Conditional statements (if, else if, else) for decision making.

Loops (for, while) for repetitive tasks. - Switch statements for multiple conditional cases.

MEDIUM

Defining functions, including parameters and return values.

Function scope, closures, and their practical applications.

Creating and manipulating arrays.

Working with objects, properties, and methods.

Iterating through arrays and objects.Understanding the Document Object Model (DOM).

Selecting and modifying HTML elements with JavaScript.Handling events (click, submit, etc.) with event listeners.

Using try-catch blocks to handle exceptions.

Common error types and debugging techniques.

HARD

Callback functions and their limitations.

Dealing with asynchronous operations, such as AJAX requests.

Promises for handling asynchronous operations.

Async/await for cleaner asynchronous code.

Arrow functions for concise function syntax.

Template literals for flexible string interpolation.

Destructuring for unpacking values from arrays and objects.

Spread/rest operators.

Design Patterns.

Writing unit tests with testing frameworks.

Code optimization techniques.

That's it I guess!

[izicodes]

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

[machinavocis]

oh i forgot this one:

yeah no i refuse to believe that 170+ people have now successfully done all their remote learning course completions + tradesperson business license renewals on my stupid god damn web app.

[lorkai]

.⁠｡⁠*⁠♡ A/N: Silly and self Indulgent scenario that's been living in my head since I've started learning coding like javascript and html awhile ago, like pls let Idia teach me, I'll listen to everything he has say. Or not. Probably not. I would probably be looking at him all the time like 👀💞.

Coming from someone as quiet as Idia, people would think that he only hides inside his room and that only silence surrounds him. But that was far from true, Idia laughed, screamed or hummed all the time when he was safe and sound inside those comforting walls and, like now, his fingers tapped the keyboard keys frantically.

"What's that supposed to be?" You asked, pointing to a series of strange codes on Idia's dimly lit computer screen. How he could see with all the lights off, you didn't know. But at least, you now knew why he complained about his eyes hurting.

Idia replied without turning around, "They're called arrays. They're used to store more than one code inside a variable, Yuu-shi."

You made an understanding sound even though you didn't understand what that meant. You remembered a thing or two about your world's programming, but the memories were blurred and as today was an especially calm day, you decided to pull a chair close to his desk and sit next to Idia to watch him work. Maybe it would help to understand what those "arrays" were for if you could watch him, besides it was fun.

You noticed how his fingers trembled slightly against the keyboard and the ends of his hair turned pink at your sudden approach, but you preferred to spare him the embarrassment and just watch him create his codes. It was almost peaceful the sound of his fingers and his soft humming.

"That's an opening tag right there, right?" You pointed again not sure and he nodded.

"Yuu-shi..." He mumbled as if unsure of his proposal. Even though you're friends, he's too scared to voice his ideas sometimes and you don't force him to say anything while you wait for him to search for the right words. Finally after a few seconds Idia turns to you with a small smile on his face. "S-sit closer, you'll be able to see better that way. I can even explain what each code is for if that doesn't bore you."

That was his shy way of saying that he would like to have you around and that he didn't mind your questions, and you readily nodded, pulling the chair closer and resting your face in your hand. Idia kept working, fingers practicing typing over and over entire columns of tags and other codes that you gradually remembered the name.

"Yuu-shi, you never told me that you, uh, liked programming." He mutters uncertainly. But then a wide smile spreads across his lips and he looks at you sideways, laughing sinisterly. "But that means I can teach you everything I know, and after I've stuffed all possible coding knowledge into your little pretty head, Yuu-shi, you will evolve from an R card to a UR+."

You shudder comically, wondering if it was too late to run. But Idia's cool hand closes over your wrist and his slender fingers find their way to yours, lacing them together as he opens another page on his computer.

"Let's start with your lesson, Yuu-shi, and... And, uh... And if you get everything right, I have a reward in mind." Idia declares, a rosy blush taking over his face.

And truly how couldn't you deny him that?

[saturnine-saturneight]

Holoatypical: Dev Log 1

Number one in what's hopefully going to be a pretty long series of updates!

So, first things first: Godot rocks. I've been using it for two weeks now, having switched from GameMaker (and before that, Twine, and before that, Java and JavaScript), and Godot does so much of the heavy lifting for you. It genuinely feels like an engine that's designed for making games. Unlike GameMaker, which was like wading through molasses every step of the way, while some sort of molasses shark is biting at your ankles. And I've coded in JavaScript.

Second, let me show you what I've been up to!

As you can see, I'm working on a prototype to try out the merging mechanic. It's got some (ha) bugs, and dragging things could be smoother, but the critters do actually snap into the grid and merge now, and I'm very pleased with that.

This chamber you see here is going to be the lab. As it's planned right now, the player will have infinite initial building blocks (eggs, spores, seeds...), which merge into different critters depending on environmental variables (artificially set in the lab) and on which other specimens are currently in the chamber. The challenge is to figure out the right parameters. I have no idea how big the chamber needs to be for that, but that's not really an issue, because...

This isn't so much a prototype as I'm just straight up building the foundations for a game, which is why it's taking me so long. The grid you see here is controlled with a few variables, and everything is flexible enough that I can simply change the grid size during playtesting and it still works.

The tile grid is an array of arrays, filled with slot nodes that I instantiate at runtime. Is this the best way to learn a new program and language? Haha. Who knows.

Specimens have a sprite sheet with all their stages on it, and when a critter levels up, the part that's visible to the player just needs to be shifted 64 pixels to the right.

That's x starting point, which is the specimen stage/level times 64, then y starting point, width, and height. Fun! So easy!!

As to the sprite sheet, I'm going against common advice and making these big. The 1bit style is super fast to do, and in my opinion, a certain level of detail is important to make the sprites look like anything. I'm moreso playing with the look than really wanting to make a retro game.

This sheet only took me an evening! I'm enjoying it because it really forces you to abstract the shape and focus on what's most important about the critter. (This is a style test - I haven't decided yet how weird I want to go with these vs making them look more natural.)

Next up will be ironing out the kinks, making an egg dispenser and a specimen incinerator so the field can be filled up and emptied, coming up with a few more specimen, and then going into play testing.

But in the next dev log, you're probably going to hear way more about the story and the characters. I am eyeing a visual novel extension for Godot (dialogic), which, if it does what I think it does, is going to take a lot of work off my hands and only leaves me with writing the actual dialogue, which I've already started on.

@tragedycoded @badscientist @curiouscalembour @writingrosesonneptune @gioiaalbanoart @monstrify @cowboybrunch @tsunamiscale @marlowethelibrarian

Was this format interesting? Less code? More code? Anything you specifically want me to talk about in this process? Let me know!

[ataleofcrowns]

Hi so sorry to bother you but I want to learn how to make IFs, so I've been using twine and trying to learn how to use sugarcube but like how 😭😭😭

Babes I am so embarassed I'm literally studying computer science oh my god. Like in theory I know that programming languages are different but this is the first time java vs javascript is really hitting,,,,

Do you have links to any resources you used to learn? Like how you randomized variables (for the 'i'm into both men and women' option's gender setting) and how to do the pronoun thing properly, and stuff like the codex, plus if you can how you customized that sidebar

Thank you and I'm sorry to bother you!!

No worries at all!! Here's a masterlist of Twine resources you can use for the things you mentioned and more. It includes tutorials for beginners, including multiple different ways on how to code pronouns, CSS customization and templates for your game, etc.

For the randomization of variables, the line of code you want is <<set $variable to either("option1", "option2", "option3", ...)>>

But for my purposes specifically, to maintain an even 2 male/2 female LI split, I had to use the code in a little more convoluted way since randomizing all the genders with that code could end up with an "uneven" balance (like 3 out of 4 LIs being randomized as female, or all LIs ending up as male).

If you want to do something similar with having a 2 male/2 female LI randomization, here's how I went about it, though I'm sure there's a much quicker way to do it. Mind you I was a total beginner when I wrote this haha:

Basically what this does is randomize R's gender and randomize X's gender first to either male or female with the first two lines. If R and X are both set as male or female, then A and D will both be set as the opposite. If R and X are set as different genders, however, then A's gender will be randomized next. Then, based on whether A is male or female, D's gender will be selected to complete the 2/2 split.

Hope this helps!!

[obey-me-rewrite]

Hi! just wanted to ask on how you personally use Twine I've been a fan of OM, and wondered how u made the remake in that system lmao. I was wondering if you had any tips / tutorials u used, I've spent some time testing and have got the hang of variables and linking but i was really confused on how you designed it / removed the borders around the side bar and everything, along with how you made the intimacy system, Especially the notify / achievement bar system! No tutorials were helping me lol

Sure! I'll do my best to explain below; feel free to ask me to expand on anything if it's confusing.

Changing sidebar:

The way you do this is basically through CSS ("Story Stylesheet"). When your game is open in the browser, you can inspect elements to figure out what they're called, then change their styles. For example, I removed the border of the menu buttons by putting the following in the stylesheet:

(for the overall borders)

menu ul {

border: none;

}

(for the borders between each link)

menu li a {

border: none;

}

w3schools.com is a great website if you'd like to learn CSS - it's what will help you completely restyle your story. There are also plenty of Twine design templates for something easier to use without having to learn code.

Intimacy system:

This one is a little more complicated. I'm actually completely rehauling the intimacy system for version 1.1. Right now, it uses a lot of if statements to check the amount of intimacy the player has collected with a character - and this intimacy is in a variable initialized in the special StoryInit passage. However, that's bandaid code which is messy and easily runs into bugs, as has happened ever since release lol. To fix it, I've essentially created a proper levelling system using custom macros and JavaScript. That requires a good grasp on behind-the-scenes programming, though. If your game isn't a huge project, keeping intimacy in variables should work just fine. Just make sure to keep a spreadsheet or notes somewhere that list how much intimacy is possible to gain and in which passages. It will make your life easier in the long run.

Notifications:

This one I actually got from one of Chapel's custom macros! They're super easy to use and do a lot of cool things. I highly recommend checking these out because they can make your life easier: link

Achievements:

I'm going to assume you're talking about achievements that persist over different saves - for this, you'll need to utilize Twine's special StoryInit passage again. In case you are not sure of what that is, it's essentially all the variables that will be initialized when the game is first loaded into the browser. Your achievements and important story-spanning variables (like personality traits, intimacy counters, etc) will go here. To create an achievement, you'd put something like this in your StoryInit:

<<set $achievement1 to recall('achievement1')>>

If the player hasn't obtained the achievement, $achievement1 will automatically be set to false. To have them actually get the achievement, put

<<run memorize($achievement1, true)>>

<<set $achievement1 to true>>

in the passage where the achievement is gained. Also, be sure to have your players know that keeping saves and achievements like these relies on browser cache - if that's cleared, their progress will be lost.

Hope that helps! I wasn't sure how familiar you are with Twine beyond variables and linking as it's a pretty big engine with many things, so I just covered things without going into deeper mechanics like Twine's special passages, scripts/stylesheets, macros, etc. I'm happy to explain those too if you're having trouble. Also, everything I explained is specifically in the Sugarcube language - it won't work in Harlowe, Snowman, etc.

Helpful links:

Twine cookbook

Chapel's custom macros

Cycy's custom macros

Albie's Twine Tutorial with tons more resources

[agatedragongames]

Learn how to code the object pool pattern by pre-allocating memory and reusing objects. Which can greatly improve performance when reusing short lived objects like bullets and particles.

This tutorial will show you how to create and manage a pool of bullet objects. For example, this is useful in shooter and bullet hell games which have thousands of bullets on the screen.

The tutorial is written in the Java programming language, and uses the free Processing graphics library and integrated development environment.

The object pool pattern can be especially useful with programming languages which use automatic garbage collection like Java, C#, JavaScript, Python, etc.

Since automatic garbage collection can stall your program and reduce your frame rates. The object pool pattern gives you more control over when the garbage collector comes to reclaim the memory.

The downside of the object pool pattern is that it complicates the life cycle of the object. Meaning you need to reset the variables of the object before you can reuse it. Since its variables are unlikely to match the defaults after repeated use.

There are a few ways to implement the object pool pattern, this tutorial will show you one method.

Walkthrough and full code example on the blog:

[sandycodes]

day 8/100

life is just throwing me for an absolute loop these days, but im starting my adventure into javascript :) i didn't do a ton of coding today, but i learned about the history of javascript as well as 2 ways of running it in the browser, both in html files within the script tag and in an REPL (also one way of declaring a variable cause i think there are others but im not sure) <3

[rnelsoncapstone]

Capstone Log #3 - A Retrospective

For my third post, since the break is over, I've decided to touch on the work I did before the break, so I can have a fresh start. This is a written reflection instead of a gameplay and code overview, as I'll be going over the three Godot projects I've made so far, and talking about my next steps in becoming confident without tutorials and being able to sustain my own code without hitting any major roadblocks.

The first game I made with Godot was a simple platformer, following a tutorial by former Unity developer Brackeys, who returned from his four year hiatus off of YouTube to start creating Godot tutorials as many game developers have switched from Unity to Godot, due to Unity's increased pricing polices. Godot is free, open source, and can create both 2D and 3D games, which makes it a great alternative to the former.

The tutorial I followed created a simple platformer, which is often one of the first games someone creates in a new engine, as it is a simple formula, and teaches the basics of code, so it is easy for newcomers to get a grasp on the differences between any coding languages they've used previously. GDScript, Godot's coding language, has many similarities to other widespread coding languages like Python and JavaScript. A gameplay video and the tutorial I used will be attached, The game does not have a lot of substance, but it has collectable coins, moving enemies, moving platforms, music, a death system, and variables that change text, some of which are in common with the other games I've made.

Moving on from my first project, the two other games I've completed (as showcased in my previous posts), have only built upon the core concepts I've picked up with Brackey's video and the video course I've been watching from GDQuest. Next, my goal is to follow "Learn to Code from Zero", a free open source app, to learn more about GDScript and Godot without reliance on being told every step.